<template>
  <div class="f-echarts" :style="{'height':height + 'px', 'width':width}"></div>
</template>
<script>
  import ECharts from 'echarts'
  import 'echarts/theme/macarons' // theme 主题
  import { EchartFormate } from '@/utils/echarts-formate'
  import FSesize from './f-resize'
  export default {
    name: 'FRadar',
    mixins: [FSesize],
    components: {
      ECharts
    },
    data () {
      return {
        width: '100%',
        chart: null
      }
    },
    props: {
      height: {
        type: Number,
        default: 200
      },
      title: {
        type: String,
        default: ''
      },
      subText: {
        type: String,
        default: ''
      },
      chartData: {
        type: Array,
        required: true
      },
      showTitle: {
        type: Boolean,
        default: true
      },
      showLegend: {
        type: Boolean,
        default: true
      },
      area: {
        type: Boolean,
        default: true
      },
      label: {
        type: Boolean,
        default: true
      }

    },
    mounted () {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy () {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart () {
        this.chart = ECharts.init(this.$el, 'macarons')
        this.setOptions()
      },
      setOptions () {
        this.chart.showLoading()
        const data = EchartFormate.RadarFormate(this.chartData, 'radar')
        this.chart.hideLoading()
        const option = {
          grid: {
            left: 20,
            right: 30,
            bottom: 10,
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'item',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            padding: [5, 10]
          },
          radar: {
            center: ['50%', '65%'],
            indicator: data.indicators
          },
          series: data.series
        }
        if (this.showTitle) {
          option.title = {
            text: this.title,
            subtext: this.subText,
            x: 'center'
          }
          option.grid.top = 80
        }
        if (this.showLegend) {
          option.legend = {
            orient: 'horizontal', // 垂直：vertical； 水平 horizontal
            left: 'center', // 位置默认右
            top: this.showTitle ? 'bottom' : 'top',
            data: data.groups
          }
          if (this.showTitle) {
            option.grid.bottom = 30
          }
        }
        if (this.area || this.label) {
          for (let i = 0; i < option.series.data.length; i++) {
            option.series.data[i].areaStyle = {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1
              }
            }
            option.series.data[i].label = {
              show: true
            }
          }
        }
        this.chart.setOption(option, true)
      }
    }
  }
</script>
<style scoped>
  .f-echarts{
    background-color: #FFFFFF;
  }
</style>
